<template>
  <div class="album-box">
    <div class="box-img">
      <!-- 插槽 -->
      <slot name="img">
        <img src="" alt="" />
      </slot>
      <a href="javascript:;" class="img-top"></a>
      <a href="javascript:;" class="play"></a>
    </div>
    <!-- 文字 -->
    <p class="title">
      <!-- 插槽 -->
      <slot name="p1">
        <a href="javascript:;">一起向未来</a>
      </slot>
    </p>

    <p class="title-two">
      <!-- 插槽 -->
      <slot name="p2">
        <a href="javascript:;">易烊千玺</a>
      </slot>
    </p>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.album-box {
  // width: 118px;
  // height: 150px;
  width: 100%;
  height: 100%;
  a {
    text-decoration: none;
  }
  .box-img {
    width: 100px;
    height: 100px;
    position: relative;
    margin-bottom: 7px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .img-top {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 118px;
      height: 100px;
      background: url('https://s2.music.126.net/style/web2/img/coverall.png?2ac4f0b43a8fc79457fe419254b2f516')
        no-repeat;
      background-position: 0 -570px;

      // z-index: 999;
    }
  }
}
.title a {
  display: block;
  color: black;
  font-size: 13px;
  width: 110px;
  margin-top: -2px;
  padding-bottom: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  &:hover {
    text-decoration: underline;
  }
}
.title-two a {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #666;
  display: block;
  width: 110px;
  &:hover {
    text-decoration: underline;
  }
}
</style>
